<template>
	<view class="container">
		<view class="background">
			<view class="circle circle-1"></view>
			<view class="circle circle-2"></view>
			<view class="circle circle-3"></view>
		</view>

		<scroll-view class="scroll-container" scroll-y="true">
			<view class="form-card">
				<view class="form-header">
					<view class="logo">📝</view>
					<text class="title">用户注册</text>
					<text class="subtitle">创建您的个人账号</text>
				</view>

				<view class="form-content">
					<view class="input-group">
						<view class="input-item">
							<view class="input-icon">
								<text class="icon">👤</text>
							</view>
							<input class="input" v-model="form.name" placeholder="请输入真实姓名"
								placeholder-class="placeholder" maxlength="17" />
							<view class="input-clear" v-if="form.name" @click="form.name = ''">
								<text class="clear-icon">×</text>
							</view>
						</view>

						<view class="input-item">
							<view class="input-icon">
								<text class="icon">🎂</text>
							</view>
							<input class="input" v-model="form.birthYear" type="number" placeholder="请输入出生年份"
								placeholder-class="placeholder" />
							<view class="input-clear" v-if="form.birthYear" @click="form.birthYear = ''">
								<text class="clear-icon">×</text>
							</view>
						</view>

						<view class="input-item">
							<view class="input-icon">
								<text class="icon">📱</text>
							</view>
							<input class="input" v-model="form.mobile" type="number" placeholder="请输入手机号"
								placeholder-class="placeholder" maxlength="11" />
							<view class="input-clear" v-if="form.mobile" @click="form.mobile = ''">
								<text class="clear-icon">×</text>
							</view>
						</view>

						<view class="input-item">
							<view class="input-icon">
								<text class="icon">📧</text>
							</view>
							<input class="input" v-model="form.email" placeholder="请输入邮箱（选填）"
								placeholder-class="placeholder" />
							<view class="input-clear" v-if="form.email" @click="form.email = ''">
								<text class="clear-icon">×</text>
							</view>
						</view>

						<view class="input-item">
							<view class="input-icon">
								<text class="icon">🏠</text>
							</view>
							<input class="input" v-model="form.address" placeholder="请输入地址（选填）"
								placeholder-class="placeholder" />
							<view class="input-clear" v-if="form.address" @click="form.address = ''">
								<text class="clear-icon">×</text>
							</view>
						</view>

						<view class="input-item">
							<view class="input-icon">
								<text class="icon">✏️</text>
							</view>
							<input class="input" v-model="form.intro" placeholder="个人简介（选填）"
								placeholder-class="placeholder" />
							<view class="input-clear" v-if="form.intro" @click="form.intro = ''">
								<text class="clear-icon">×</text>
							</view>
						</view>

						<view class="input-item">
							<view class="input-icon">
								<text class="icon">🆔</text>
							</view>
							<input class="input" v-model="form.loginAccount" placeholder="请设置登录账户"
								placeholder-class="placeholder" maxlength="20" />
							<view class="input-clear" v-if="form.loginAccount" @click="form.loginAccount = ''">
								<text class="clear-icon">×</text>
							</view>
						</view>

						<view class="input-item">
							<view class="input-icon">
								<text class="icon">🔒</text>
							</view>
							<input class="input" v-model="form.loginPwd" password placeholder="请设置密码（至少6位）"
								placeholder-class="placeholder" />
							<view class="input-clear" v-if="form.loginPwd" @click="form.loginPwd = ''">
								<text class="clear-icon">×</text>
							</view>
						</view>

						<view class="input-item">
							<view class="input-icon">
								<text class="icon">✅</text>
							</view>
							<input class="input" v-model="form.confirmPwd" password placeholder="请确认密码"
								placeholder-class="placeholder" />
							<view class="input-clear" v-if="form.confirmPwd" @click="form.confirmPwd = ''">
								<text class="clear-icon">×</text>
							</view>
						</view>
					</view>

					<view class="form-tips">
						<view class="tip-item" v-if="form.name && (form.name.length < 2 || form.name.length > 17)">
							<text class="tip-icon">⚠️</text>
							<text class="tip-text">姓名需2-17个字符</text>
						</view>
						<view class="tip-item"
							v-if="form.birthYear && (form.birthYear < 1950 || form.birthYear > maxBirthYear)">
							<text class="tip-icon">⚠️</text>
							<text class="tip-text">出生年份需在1950-{{maxBirthYear}}之间</text>
						</view>
						<view class="tip-item" v-if="form.mobile && !isValidMobile(form.mobile)">
							<text class="tip-icon">⚠️</text>
							<text class="tip-text">请输入有效的手机号</text>
						</view>
						<view class="tip-item" v-if="form.loginPwd && form.loginPwd.length < 6">
							<text class="tip-icon">⚠️</text>
							<text class="tip-text">密码至少6位</text>
						</view>
						<view class="tip-item"
							v-if="form.loginPwd && form.confirmPwd && form.loginPwd !== form.confirmPwd">
							<text class="tip-icon">⚠️</text>
							<text class="tip-text">两次密码不一致</text>
						</view>
					</view>

					<view class="agreement">
						<label class="agreement-item" @click="agreed = !agreed">
							<view class="checkbox-container" :class="{checked: agreed}">
								<text class="checkbox-icon" v-if="agreed">✓</text>
							</view>
							<text class="agreement-text">我已阅读并同意</text>
							<text class="agreement-link">《用户协议》</text>
							<text class="agreement-text">和</text>
							<text class="agreement-link">《隐私政策》</text>
						</label>
					</view>

					<button class="login-btn register-btn" type="primary" @click="handleRegister" :disabled="!agreed || loading">
						<text class="btn-text">{{ loading ? '注册中...' : '注册' }}</text>
					</button>

					<view class="link-group">
						<text class="link-text">已有账号?</text>
						<navigator url="/pages/Login/Login" open-type="redirect" class="link">立即登录</navigator>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentYear = new Date().getFullYear();
			return {
				form: {
					name: '', 
					birthYear: '', 
					mobile: '', 
					email: '', 
					address: '', 
					intro: '', 
					loginAccount: '', 
					loginPwd: '', 
					confirmPwd: '' 
				},
				maxBirthYear: currentYear - 5,
				agreed: false,
				loading: false
			}
		},
		methods: {
			isValidMobile(mobile) {
				const reg = /^1[3-9]\d{9}$/
				return reg.test(mobile)
			},

			validateForm() {
				const {
					name,
					birthYear,
					mobile,
					loginAccount,
					loginPwd,
					confirmPwd
				} = this.form

				if (!name || !birthYear || !mobile || !loginAccount || !loginPwd) {
					uni.showToast({
						title: '请填写完整必填信息',
						icon: 'none'
					})
					return false
				}

				if (name.length < 2 || name.length > 17) {
					uni.showToast({
						title: '姓名需2-17个字符',
						icon: 'none'
					})
					return false
				}

				const year = parseInt(birthYear)
				if (isNaN(year) || year < 1950 || year > this.maxBirthYear) {
					uni.showToast({
						title: `出生年份需在1950-${this.maxBirthYear}之间`,
						icon: 'none'
					})
					return false
				}

				if (!this.isValidMobile(mobile)) {
					uni.showToast({
						title: '请输入有效的手机号',
						icon: 'none'
					})
					return false
				}

				if (loginAccount.length < 2 || loginAccount.length > 20) {
					uni.showToast({
						title: '登录账户需2-20个字符',
						icon: 'none'
					})
					return false
				}

				if (loginPwd.length < 6) {
					uni.showToast({
						title: '密码长度至少6位',
						icon: 'none'
					})
					return false
				}

				if (loginPwd !== confirmPwd) {
					uni.showToast({
						title: '两次密码输入不一致',
						icon: 'none'
					})
					return false
				}

				if (!this.agreed) {
					uni.showToast({
						title: '请同意用户协议和隐私政策',
						icon: 'none'
					})
					return false
				}

				return true
			},

			// 注册处理（优化错误捕获+日志）
			async handleRegister() {
				if (!this.validateForm()) {
					return
				}

				this.loading = true

				try {
					// 1. 打印请求参数（方便排查）
					console.log('注册请求参数：', this.form)
					
					// 2. 调用云函数
					const res = await uniCloud.callFunction({
						name: 'register', // 确保云函数名称正确
						data: {
							name: this.form.name,
							birthYear: parseInt(this.form.birthYear),
							mobile: this.form.mobile,
							email: this.form.email || '',
							address: this.form.address || '',
							intro: this.form.intro || '',
							loginAccount: this.form.loginAccount,
							loginPwd: this.form.loginPwd // 注意：实际项目中密码要加密！
						}
					})

					// 3. 打印云函数返回结果
					console.log('注册云函数返回：', res)

					// 4. 处理返回结果
					if (res && res.result) {
						const { code, msg } = res.result
						if (code === 200) {
							uni.showToast({
								title: msg || '注册成功',
								icon: 'success',
								duration: 2000
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/Login/Login'
								})
							}, 1500)
						} else {
							uni.showToast({
								title: msg || '注册失败',
								icon: 'none'
							})
						}
					} else {
						throw new Error('云函数返回格式异常')
					}

				} catch (error) {
					// 详细打印错误信息
					console.error('注册失败（异常）：', error)
					uni.showToast({
						title: `注册失败：${error.message || '未知错误'}`,
						icon: 'none',
						duration: 3000
					})
				} finally {
					this.loading = false
				}
			}
		}
	}
</script>

<style>
	/* 样式保持不变 */
	.container {
		height: 100vh;
		background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		overflow: hidden;
	}
	
	.background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	.circle {
		position: absolute;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.15);
	}
	
	.circle-1 {
		width: 350rpx;
		height: 350rpx;
		top: -120rpx;
		right: -120rpx;
	}
	
	.circle-2 {
		width: 250rpx;
		height: 250rpx;
		bottom: 80rpx;
		left: -80rpx;
	}
	
	.circle-3 {
		width: 200rpx;
		height: 200rpx;
		bottom: -60rpx;
		right: 150rpx;
	}

	.scroll-container {
		width: 100%;
		height: 100%;
		padding: 40rpx;
		box-sizing: border-box;
	}
	
	.form-card {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 70rpx 50rpx;
		box-shadow: 0 15rpx 50rpx rgba(0, 0, 0, 0.12);
		width: 100%;
		max-width: 580rpx;
		margin: 0 auto;
		position: relative;
		z-index: 2;
	}
	
	.form-header {
		text-align: center;
		margin-bottom: 60rpx;
	}
	
	.logo {
		font-size: 80rpx;
		margin-bottom: 30rpx;
	}
	
	.title {
		display: block;
		font-size: 46rpx;
		font-weight: 600;
		color: #2c3e50;
		margin-bottom: 14rpx;
	}
	
	.subtitle {
		font-size: 26rpx;
		color: #7f8c8d;
	}
	
	.input-group {
		margin-bottom: 40rpx;
	}
	
	.input-item {
		display: flex;
		align-items: center;
		background: #f5f7fa;
		border-radius: 14rpx;
		padding: 0 30rpx;
		margin-bottom: 26rpx;
		border: 1px solid #e1e5eb;
		transition: all 0.3s ease;
		height: 96rpx;
	}
	
	.input-item:focus-within {
		border-color: #3498db;
		background: #ffffff;
		box-shadow: 0 0 0 4rpx rgba(52, 152, 219, 0.15);
	}
	
	.input-icon {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}
	
	.icon {
		font-size: 34rpx;
		color: #3498db;
	}
	
	.input {
		flex: 1;
		height: 96rpx;
		font-size: 28rpx;
		color: #2c3e50;
	}
	
	.placeholder {
		color: #a0aabf;
		font-size: 28rpx;
	}

	.input-clear {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background: #e0e0e0;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10rpx;
		flex-shrink: 0;
	}

	.clear-icon {
		font-size: 28rpx;
		color: #666;
		font-weight: bold;
	}
	
	.form-tips {
		margin-bottom: 30rpx;
	}

	.tip-item {
		display: flex;
		align-items: center;
		padding: 12rpx 20rpx;
		background: #fff8e1;
		border-radius: 10rpx;
		margin-bottom: 12rpx;
		border-left: 4rpx solid #ffb300;
	}

	.tip-icon {
		font-size: 28rpx;
		margin-right: 12rpx;
		color: #ff9800;
	}

	.tip-text {
		font-size: 24rpx;
		color: #ff6f00;
		flex: 1;
	}

	.agreement {
		margin-bottom: 40rpx;
		padding: 0 10rpx;
	}

	.agreement-item {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 15rpx 0;
	}

	.checkbox-container {
		width: 40rpx;
		height: 40rpx;
		border-radius: 8rpx;
		border: 2rpx solid #ccc;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 15rpx;
		transition: all 0.3s ease;
		flex-shrink: 0;
	}

	.checkbox-container.checked {
		border-color: #3498db;
		background: #3498db;
	}

	.checkbox-icon {
		font-size: 28rpx;
		color: #fff;
	}

	.agreement-text {
		font-size: 24rpx;
		color: #7f8c8d;
		margin-right: 8rpx;
	}

	.agreement-link {
		font-size: 24rpx;
		color: #3498db;
		font-weight: 600;
		margin: 0 8rpx;
	}
	
	.login-btn {
		background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
		border: none;
		border-radius: 14rpx;
		height: 96rpx;
		line-height: 96rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #ffffff;
		margin-bottom: 30rpx;
		box-shadow: 0 6rpx 20rpx rgba(52, 152, 219, 0.3);
		transition: all 0.3s ease;
		width: 100%;
	}
	
	.login-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 3rpx 12rpx rgba(52, 152, 219, 0.3);
	}

	.login-btn[disabled] {
		background: #ccc;
		box-shadow: none;
		opacity: 0.6;
	}
	
	.btn-text {
		color: #ffffff;
	}
	
	.link-group {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 16rpx;
	}
	
	.link-text {
		font-size: 24rpx;
		color: #7f8c8d;
	}
	
	.link {
		font-size: 24rpx;
		color: #3498db;
		font-weight: 600;
		text-decoration: none;
	}

	@media (max-width: 750rpx) {
		.container {
			padding: 20rpx;
		}
		
		.form-card {
			padding: 60rpx 30rpx;
		}
		
		.title {
			font-size: 40rpx;
		}

		.scroll-container {
			padding: 20rpx;
		}
	}
</style>